<!DOCTYPE HTML>
<html lang="en-US">

	<head>
		<meta charset="UTF-8">
		<title>导航</title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			body {
				background: #ebebeb;
			}
			
			.nav {
				width: 560px;
				height: 50px;
				font: bold 0/50px Arial;
				text-align: center;
				margin: 40px auto 0;
				border-radius: 8px;
			}
			
			.nav a {
				display: inline-block;
				-webkit-transition: all 0.2s ease-in;
				-moz-transition: all 0.2s ease-in;
				-o-transition: all 0.2s ease-in;
				-ms-transition: all 0.2s ease-in;
				transition: all 0.2s ease-in;
			}
			
			.nav a:hover {
				-webkit-transform: rotate(10deg);
				-moz-transform: rotate(10deg);
				-o-transform: rotate(10deg);
				-ms-transform: rotate(10deg);
				transform: rotate(10deg);
			}
			
			.black {
				background: #2c2c2c;
				box-shadow: 0 7px 0 #0b0b0b;
			}
			
			.red {
				background: #f65f57;
				box-shadow: 0 7px 0 #ba4a45;
			}
			
			.blue {
				background: #36b7e5;
				box-shadow: 0 7px 0 #3595b8;
			}
			
			.green {
				background: #9cd564;
				box-shadow: 0 7px 0 #86b65b;
			}
			
			.nav li {
				position: relative;
				display: inline-block;
				padding: 0 16px;
				font-size: 13px;
				text-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
				list-style: none outside none;
			}
			
			.nav li::before,
			.nav li::after {
				content: "";
				position: absolute;
				top: 14px;
				height: 25px;
				width: 1px;
			}
			
			.nav li::after {
				right: 0;
				background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
				background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
				background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
				background: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
				background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
			}
			
			.black li::before {
				left: 0;
				background: -moz-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
				background: -webkit-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
				background: -o-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
				background: -ms-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
				background: linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
			}
			
			.red li::before {
				left: 0;
				background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
				background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
				background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
				background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
				background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
			}
			
			.blue li::before {
				left: 0;
				background: -moz-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
				background: -webkit-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
				background: -o-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
				background: -ms-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
				background: linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
			}
			
			.green li::before {
				left: 0;
				background: -moz-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
				background: -webkit-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
				background: -o-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
				background: -ms-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
				background: linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
			}
			
			.nav li:first-child::before {
				background: none;
			}
			
			.nav li:last-child::after {
				background: none;
			}
			
			.nav a,
			.nav a:hover {
				color: #fff;
				text-decoration: none;
			}
		</style>
	</head>

	<body>

		<section class="demo">
			<ul class="nav black">
				<li>
					<a href="#">测试环境</a>
				</li>
				<li>
					<a href="http://10.22.28.3:9082/CSMSClient" target="_blank">自营</a>
				</li>
				<li>
					<a href="http://10.22.28.3:9082/AMMSClient" target="_blank">代理</a>
				</li>
				<li>
					<a href="http://10.22.28.3:9081/IVRClient" target="_blank">呼叫中心</a>
				</li>
				<li>
					<a href="http://10.22.28.3:9081/MACAOClient" target="_blank">澳门</a>
				</li>
				<li>
					<a href="http://10.22.28.3:9081/ACMSClient" target="_blank">香港</a>
				</li>
				<li>
					<a href="http://10.22.28.1:9081/UUMSClient" target="_blank">认证</a>
				</li>
				<li>
					<a href="http://10.22.28.1:9083/OMSClient" target="_blank">营运</a>
				</li>
			</ul>
			<ul class="nav red">
				<li>
					<a href="#">演练环境</a>
				</li>
				<li>
					<a href="http://10.22.30.100:9081/CSMSClient" target="_blank">自营</a>
				</li>
				<li>
					<a href="http://10.22.30.100:9082/AMMSClient" target="_blank">代理</a>
				</li>
				<li>
					<a href="http://10.22.30.100:9081/IVRClient" target="_blank">呼叫中心</a>
				</li>
				<li>
					<a href="http://10.22.30.1:9081/MACAOClient" target="_blank">澳门</a>
				</li>
				<li>
					<a href="http://10.22.30.100:9081/ACMSClient" target="_blank">香港</a>
				</li>
				<li>
					<a href="http://10.22.30.100:9083/UUMSClient" target="_blank">认证</a>
				</li>
				<li>
					<a href="http://10.22.30.100:9081/OMSClient" target="_blank">营运</a>
				</li>

			</ul>
			<ul class="nav blue">

				<li>
					<a href="https://10.22.28.3:9043/ibm/console/login.do" target="_blank">Was控制台-28.3</a>
				</li>
				<li>
					<a href="http://10.22.29.3:9060/ibm/console" target="_blank">Was控制台-29.3</a>
				</li>
				<li>
					<a href="http://10.22.30.3:9060/ibm/console" target="_blank">Was控制台-30.3</a>
				</li>
				<li>
					<a href="http://10.22.28.3:9085/VTAMsgServer/assets/login.html" target="_blank">映射子系统</a>
				</li>

			</ul>
			<ul class="nav green">
				<li>
					<a href="http://oa.hgits.cn/" target="_blank">OA</a>
				</li>
				<li>
					<a href="https://exmail.qq.com/cgi-bin/loginpage" target="_blank">邮箱</a>
				</li>
				<li>
					<a href="http://it.hgits.cn:89/WeekReport/" target="_blank">周报</a>
				</li>
				<li>
					<a href="http://219.135.160.131:82/zentao/my-bug.html" target="_blank">禅道</a>
				</li>
				<li>
					<a href="http://my.hgits.cn:86/assets/index.html#/home" target="_blank">生产平台</a>
				</li>
				<li>
					<a href="#" class="testRMI" title="10.22.28.1:3302">测试RMI</a>
					<input type="hidden" value="10.22.28.1:3302" id="testId" />
				</li>
				<li>
					<a href="#" class="showRMI" title="10.22.29.100:3301">演练RMI</a>
					<input type="hidden" value="10.22.29.100:3301" id="showId" />
				</li>
			</ul>
		</section>

	</body>
	<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
	<script>
		$(".testRMI").on('click', function(e) {
			var test = document.getElementById("testId");
			test.select(); // 选择对象
			document.execCommand("Copy"); // 执行浏览器复制命令
			layer.msg('已复制好，可贴粘。', {
				icon: 1
			});
		})
		$(".showRMI").on('click', function(e) {
			var show = document.getElementById("showId");
			show.select(); // 选择对象
			document.execCommand("Copy"); // 执行浏览器复制命令
			layer.msg('已复制好，可贴粘。', {
				icon: 1
			});
		})
	</script>

</html>